<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="/css/ksd.css"/>
</head>
<body>

<div id="app">
    <div id="courseListBox" class="course_bdleft course-block  Mtp25">
        <div class="text-center mt-5">
            <h1 class="fz32 fw">学相伴微信支付V3-Native系列</h1>
            <img :src="course.payimg" width="250" alt="">
            <h3>你购买的课程是：{{course.title}}，价格是：￥{{course.price}}</h3>
        </div>
        <div class="course_stage_item">
            <h2 class="ksd-title-position-h2" index="1" id="ksd-title-position-1">
                <span class="cro_icon1">1</span>
                <span>第一阶段：JavaSE</span>
            </h2>
            <div class="path-course-r">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 animated fadeInUp delay-1s"
                         v-for="(course,index) in courses">
                        <div class="course-item">
                            <div class="course-img ">
                                <a :href="'/apicoursedetail/'+course.courseid" target="_blank" :title="course.title"
                                   class="course__img">
                                    <img height="140" width="100%" :src="'https://www.kuangstudy.com'+course.img"
                                         data-original="/assert/course/c1/01.jpg" style="">
                                    <span class="stimer">课程价格：￥{{course.price}}</span>
                                </a>
                            </div>
                            <div class="course-content">
                                <h3 title="聊聊编程这条路" class="course__title">
                                    <a :href="'/api/coursedetail/'+course.courseid" target="_blank"
                                       :title="course.title"
                                       class="course__img">
                                        {{course.title}}
                                    </a>
                                </h3>
                                <p class="course__author">{{course.intro}}</p>
                                <div class="course-price-wrap" @click="buyCourrse(index)">
                                    <span class="course__btn">点击购买</span>
                                </div>
                            </div>
                        </div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/vue.min.js"></script>
<script src="/js/axios.min.js"></script>
<script>
    var vue = new Vue({
        el: "#app",
        data: {
            course: {
                payimg: ""
            },
            count:30,
            courses: []
        },
        created: function () {
            this.load();
        },
        methods: {
            load: function () {
                var that = this;
                axios.get("/api/loadcourse").then(function (res) {
                    that.courses = res.data.data.courses;
                    that.buyCourrse(0);
                })
            },
            buyCourrse: function (index) {
                this.course = this.courses[index];
                this.course.payimg = "/api/weixinpay?courseid=" + this.course.courseid;
                // 调用轮询监听
                this.listener();
            },

            // 监听支付成功的逻辑
            paySuccess: function () {
                var that = this;
                if(that.count<=0){
                    if (that.timer) clearInterval(that.timer);
                    alert("支付超时!!!");
                    return;
                }
                this.count --;
                var courseid = this.course.courseid;
                axios.get("/api/paySuccess?courseid=" + courseid).then(function (res) {
                    if(res.data.code == 20000){
                        if (that.timer) clearInterval(that.timer);
                        alert("支付成功!!!");
                    }
                })
            },

            // 轮询监听
            listener: function () {
                if (this.timer) clearInterval(this.timer);
                this.timer = setInterval(this.paySuccess, 3000);
            }
        }
    })
</script>
</body>
</html>